<template>
    <div class="g-header">
        <router-link to="/" class="fa fa-home" aria-hidden="true">首页</router-link>
        <v-button type="primary" class="add-menu-btn" @click="showModal">添加菜单</v-button>
        <v-modal title="添加菜单"
                 :visible="visible"
                 @ok="addMenu"
                 @cancel="handleCancel"
        >
            <v-form direction="horizontal" :model="menuForm" ref="menuForm" :rules="menuRules">
                <v-form-item label="菜单名称" prop="name">
                    <v-input size="large" v-model="menuForm.name"></v-input>
                </v-form-item>
            </v-form>
        </v-modal>
    </div>
</template>
<script>
    const COMPONENT_NAME = 'heads';

    export default {
        name: COMPONENT_NAME,
        data() {
            return {
                visible: false,
                menuForm: {
                    name: ''
                },
                menuRules: {
                    name: [{ required: true, message: '请输入菜单名称' }]
                }
            }
        },
        methods: {
            showModal() {
                this.visible = true;
            },
            handleCancel() {
                this.visible = false;
            },
            addMenu() {
                let name = this.menuForm.name;
                this.$refs.menuForm.validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('addMenu', {
                            name,
                        })
                        this.handleCancel();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="less" coped>
    a {
        color: #fff !important;
    }

    .add-menu-btn {
        margin-left: 140px;
    }
</style>
